"use client";

import { Box } from "@chakra-ui/react";
import { useState } from "react";
import { useTranslation } from "@/src/i18n";

function CreateMacroName({ onSumbit }: { onSumbit: (name: string) => void }) {
  const [name, setName] = useState("");
  const { t } = useTranslation("");

  const handleNameChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
    const value = evt.target.value;
    if (value.length <= 20) {
      // 限制输入长度为20
      setName(value);
    }
  };

  return (
    <div className="flex flex-col justify-center items-center h-full gap-2">
      <Box className="w-66 items-center text-center">
        <form onSubmit={() => onSumbit(name)} className="w-66">
          <input
            value={name}
            onChange={handleNameChange}
            autoFocus
            maxLength={20} // 添加 maxLength 属性
            className="text-3xl text-white text-center bg-transparent outline-none w-auto px-2 max-w-full font-bold mr-2 caret-blue-1 resize-none"
            placeholder={t("macroName")}
          />
        </form>
        <Box className="font-bold text-xl text-[#bbbbbb]">{name.length}/20</Box>
      </Box>
      <Box className="text-center font-bold text-sm text-[#bbbbbb]">
        {t("pleaseEnter")}
      </Box>
    </div>
  );
}

export default CreateMacroName;
